<template>
  <div>
    <van-tabbar route>
      <van-tabbar-item  :to="{path:'/Home'}">
        <span>首页</span>
        <template #icon="props">
          <span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#iconfont-shouye"></use>
            </svg>
          </span>
        </template>
      </van-tabbar-item>
      <van-tabbar-item  :to="{path:'/Shop'}">
         <span>商场</span>
        <template #icon="props">
          <span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#iconfont-icon-test"></use>
            </svg>
          </span>
        </template>
      </van-tabbar-item>
      <van-tabbar-item :to="{path:'/Entrance'}">
         <span>门禁</span>
        <template #icon="props">
          <span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#iconfont-men"></use>
            </svg>
          </span>
        </template>
      </van-tabbar-item>
        <van-tabbar-item :to="{path:'/Community'}">
         <span>社区</span>
        <template #icon="props">
          <span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#iconfont-pinglun"></use>
            </svg>
          </span>
        </template>
      </van-tabbar-item>
      <van-tabbar-item :to="{path:'/Myself'}">
         <span>我的</span>
        <template #icon="props">
          <span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#iconfont-wode"></use>
            </svg>
          </span>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script >
import '@/assets/style/iconfont.css'
import Vue from 'vue'
import { Tabbar, TabbarItem } from 'vant'

Vue.use(Tabbar).use(TabbarItem)
export default {
  name: 'ButtomTabbar',
  data () {
    return {
      active: 0,
      icon: {
        active: 'https://img.yzcdn.cn/vant/user-active.png',
        inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
      }
    }
  }
}
</script>

<style  scoped>
.iconfont{
  font-size: 25px;
}
.menjin{
  font-size: 30px;
}
.icon {
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
